<template>
    <!--用户等级管理-->
    <div class="content_panel project_modules deal-list">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('operation.userLevelManage')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row>
                    <el-col :span="5">
                        <el-form-item prop="appName">
                            <el-select @change="selectAppNameChange" v-model="form.appName" :placeholder="$t('system.appName')" style="width:100%;" clearable>
                                <el-option v-for="item in appList" :key="item.id" :value="item.name" :label="item.name" ></el-option><!--APP名称-->
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item prop="levelName" label="">
                            <el-input v-model="form.levelName" :placeholder="$t('operation.userLevelName')" clearable></el-input><!--用户等级名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item prop="active"> <!--状态-->
                            <el-select v-model="form.active" :clearable='true' :placeholder="$t('common.status')" style="width: 100%">
                                <el-option key="0" :label="$t('finance.activation')" value="0"></el-option>
                                <el-option key="1" :label="$t('finance.inactivated')" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table ref="table" :data="tableData" style="width: 100%;" :max-height="tableMaxHeight" :highlight-current-row="true">
                        <el-table-column prop="levelName" :label="$t('operation.userLevel')" min-width="130"></el-table-column><!--用户等级-->
                        <el-table-column prop="remark" :label="$t('system.desc')" :show-overflow-tooltip="true" min-width="130"></el-table-column><!--描述-->
                        <el-table-column :label="$t('operation.preOverdueDay')" min-width="130">
                            <template slot-scope="scope">
                                <span>{{scope.row.lastLateDaysLeft}}~{{scope.row.lastLateDays}}</span>
                            </template>
                        </el-table-column><!--上一笔逾期天数-->
                        <el-table-column prop="lateDaysSum" :label="$t('operation.overdueDaysSum')" min-width="130"></el-table-column><!--逾期天数总和-->
                        <el-table-column prop="borrowTimes" :label="$t('operation.borrowTimes')" min-width="130"></el-table-column><!--借款次数-->
                        <el-table-column prop="active" :label="$t('common.status')" min-width="130"><!--状态-->
                            <template slot-scope="scope">{{+scope.row.active === 0 ? $t('finance.activation') : $t('finance.inactivated')}}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.operation')" width="100"><!--操作-->
                            <template slot-scope="scope">
                                <el-button @click="showDialog(scope.row)" type="text">{{$t('operation.modify')}}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--分页组件-->
                    <pagination @pageChange="pageChange" :page="page"><!--分页组件--></pagination>
                </div>
            </div>
        </div>

        <!--修改用户等级start-->
        <!-- <el-dialog :visible.sync="showLevelDialog" :width="$i18n.locale === 'en' ? '480px' : '400px'" :title="$t('operation.modifyUserLevel')"> -->
        <el-dialog :visible.sync="showLevelDialog" :width="'540px'" :title="$t('operation.modifyUserLevel')">
            <el-form ref="modifyForm" :model="modifyForm" :inline="true" :rules="modifyRules">
                <el-form-item :label="$t('system.desc')" prop="remark" :label-width="formLabelWidth"><!--描述-->
                    <el-input v-model="modifyForm.remark" type="textarea" :rows="3" :maxlength="200" class="iptWidth"></el-input>
                </el-form-item>
                    <!--上一笔逾期天数-->
                <el-form-item class="pre-overdue-day" :label="$t('operation.preOverdueDay')" :label-width="formLabelWidth">
                        <el-row>
                            <el-col :span="11">
                                <el-form-item prop="lastLateDaysLeft" >
                            <el-input v-model="modifyForm.lastLateDaysLeft" type="input" :maxlength="3"></el-input>
                        </el-form-item></el-col>
                        <el-col :span="2" class="text">-</el-col>
                            <el-col :span="11">
                                <el-form-item prop="lastLateDays" >
                            <el-input v-model="modifyForm.lastLateDays" type="input" :maxlength="3"></el-input>
                        </el-form-item></el-col>
                        </el-row>
                </el-form-item>
                
                <el-form-item :label="$t('operation.overdueDaysSum')" prop="lateDaysSum" :label-width="formLabelWidth"><!--逾期天数总和-->
                    <el-input v-model="modifyForm.lateDaysSum" type="input" :maxlength="3" class="iptWidth"></el-input>
                </el-form-item>
                <el-form-item :label="$t('operation.borrowTimes')" prop="borrowTimes" :label-width="formLabelWidth"><!--借款次数-->
                    <el-input v-model="modifyForm.borrowTimes" type="input" :maxlength="3" class="iptWidth"></el-input>
                </el-form-item>
                <el-form-item :label="$t('common.status')" prop="active" :label-width="formLabelWidth"> <!--状态-->
                    <el-select v-model="modifyForm.active" :clearable='true' :placeholder="$t('common.status')" class="iptWidth">
                        <el-option key="0" :label="$t('finance.activation')" :value="0"></el-option>
                        <el-option key="1" :label="$t('finance.inactivated')" :value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="submit" type="primary">{{$t('common.confirm')}}</el-button>
                <el-button @click="showLevelDialog = false" type="default">{{$t('common.cancel')}}</el-button>
            </div>
        </el-dialog>
        <!--修改用户等级end-->
    </div>
</template>

<script>
    import mixin from '@/service/mixin';
    import Pagination from '@/components/pagination';

    let that = null;
    export default {
        name: 'operation-levelManage-userLevel',
        components: {
            Pagination,
        },
        mixins: [mixin],
        data() {
            return {
                appList:[],
                user: this.$storage.get('user'),
                form: {
                    levelName: '',
                    active: '',
                    appName:''
                },
                rules: {
                    appName:[
                        {
                            required:true,
                            message:this.$t('common.plsSelectApp')
                        }
                    ]
                },
                modifyForm: {
                    id: '',
                    remark: '',
                    active: '',
                    lastLateDays: '',
                    lateDaysSum: '',
                    borrowTimes: '',
                    lastLateDaysLeft: ''
                },
                modifyRules: {
                    remark: [
                        {required: true, message: this.$t('verify.plsInput')},
                    ],
                    lastLateDays: [
                        {required: true, message: this.$t('verify.plsInput')},
                        { pattern: /^-?[0-9]\d*$/, message: this.$t('verify.plsInputDay'), trigger: 'blur' }
                    ],
                    lastLateDaysLeft: [
                        {required: true, message: this.$t('verify.plsInput')},
                        { pattern: /^-?[0-9]\d*$/, message: this.$t('verify.plsInputDay'), trigger: 'blur' }
                    ],
                    lateDaysSum: [
                        {required: true, message: this.$t('verify.plsInput')},
                        { pattern: /^-?[0-9]\d*$/, message: this.$t('verify.plsInputNumber'), trigger: 'blur' }
                    ],
                    borrowTimes: [
                        {required: true, message: this.$t('verify.plsInput')},
                        { pattern: /^-?[0-9]\d*$/, message: this.$t('verify.plsInputNumber'), trigger: 'blur' }
                    ],
                    active: [
                        {required: true, message: this.$t('verify.plsInput')},
                    ],
                },
                showLevelDialog: false,
                formLabelWidth: this.$i18n.locale === 'en' ? '225px' : '135px'
            };
        },
        methods: {
            //
            selectAppNameChange(value){
                console.warn(value)
                if(value!==''){
                    this.page.currentPage = 1;
                    this.getTableData();
                }
            },
            //获取app列表
            getCompanyList() {
                const params = {
                    appListDomain: this.$storage.get('user').domain,
                };
                this.$api.systemManage.getAppListdomain(params).then((res) => {
                    const {status, data, error} = res;
                    if ('1' === status && error === '00000000') {
                        this.appList = data || [];
                    }      
                });
            },
            // 获取列表数据
            getTableData(page = this.page) {
                const params = this.fillParams(page);
                this.$api.operation.queryLevelConfigPage(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.tableData = data.resultData;
                        this.setPage(data.page, this.page);
                    }
                    this.tableMaxHeight = document.body.clientHeight - 265;
                });
            },
            // 搜索列表数据
            search() {
                this.$refs.form.validate(val => {
                    if (val) {
                        this.page.currentPage = 1;
                        this.getTableData();
                    }
                });
            },
            // 配置查询和导出参数
            fillParams(page = this.page) {
                const form = this.form;
                const params = {
                    active: form.active,
                    levelName: form.levelName,
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    },
                };
                Object.keys(form).forEach(key => {
                    if (typeof form[key] === 'string' && form[key]) {
                        form[key] = form[key].trim();
                        params[key] = form[key];
                    }
                });
                return params;
            },
            // 显示修改用户等级弹框
            showDialog(row) {
                this.modifyForm = Object.assign({},row);
                this.showLevelDialog = true;
            },
            // 提交修改
            submit() {
                this.$refs.modifyForm.validate(val => {
                    if (val) {
                        const  { modifyForm } = this;
                        const params = {
                            id: modifyForm.id,
                            remark: modifyForm.remark.trim(),
                            active: modifyForm.active,
                            lastLateDays: modifyForm.lastLateDays,
                            lateDaysSum: modifyForm.lateDaysSum,
                            borrowTimes: modifyForm.borrowTimes,
                            lastLateDaysLeft: modifyForm.lastLateDaysLeft
                        }
                        this.$api.operation.updateLevelConfig(params).then(res => {
                            const {status, data, error} = res;
                            if ('1' === status && '00000000' === error) {
                                this.$message.success(this.$t('common.successfulOperation'));
                                this.showLevelDialog = false;
                                this.getTableData();
                            }
                        });
                    }
                });
            }
        },
        filters: {
        },
        created() {
            that = this;
            // this.getTableData({currentPage: this.page.currentPage}, this.form);
            this.getCompanyList();
            this.$message({
             message: this.$t('common.plsSelectApp'),
             type: 'warning'
            });
        },
    };
</script>

<style lang="scss">
    [data-page=operation-levelManage-userLevel] {
        .noteRed {
            color: red;
        }
        .iptWidth {
            width: 200px;
        }
        .el-col {
            padding-left: 10px;
        }
        .el-table .cell, .el-table th > .cell {
            word-break: keep-all;
            word-wrap: break-word;
        }
        .el-tooltip__popper {
            max-width: 300px;
            word-break: break-all;
            background-color: #fff;
            box-shadow: 0px 0px 5px #ccc;
            color: #000;
        }
        .el-date-editor .el-range-separator {
            width: 35px;
        }
    }
    .pre-overdue-day {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap;
        .el-form-item__label {
            min-width: 135px;
        }
        .iptWidth1 {
            width: 85px;
        }
        .text {
            text-align: center !important;
        }
    }
</style>
